%html{"xml:lang"=>"en", "lang"=>"en", "xmlns"=>"http://www.w3.org/1999/xhtml"}
  %head
    = stylesheet_link_tag 'base', 'tomatime',{:charset => 'utf-8'}
    <!--[if IE]>
    <link rel='stylesheet' href='/stylesheets/ie.css' type='text/css' media='screen' title='' charset='utf-8' />
    <![endif]--> 
    = javascript_include_tag :defaults
  %body
    #chat
      #cabecera
        %table
          %tr
            %td= avatar(current_usuario, "thumb_medium")
            %td{:style => "width:100px;"}
              = current_usuario.login
            %td{:style => "width:100px; text-align:right;"}
              = @el_otro_usuario.login
            %td= avatar(@el_otro_usuario, "thumb_medium")
      #mensajes
        %li{:class => "notificacion_verde"}
          - if params[:new]
            = "A la espera de que entre #{@el_otro_usuario.login}"
          - else
            = "#{@el_otro_usuario.login} ha entrado"
      #nuevo_mensaje
        -form_remote_for :mensaje, :url => crear_mensaje_chat_path(:id => params[:id], :usuario =>current_usuario.login),:loading => "$('mensaje_texto').disable();  Element.show('spinner_chat');", :complete => "Element.hide('spinner_chat')" do |f|
          %table{:cellpadding=>3}
            %tr
              %td{:style => "width:20px;"}
                = image_tag("/images/spin.gif", :id => "spinner_chat", :alt => "spinner", :style=>"display:none;")
              %td= f.text_field :texto, :size => 25
              %td= image_submit_tag "/images/botones/enviar.png", {:alt => 'image/enviar'}
      #pie_chat

      %script{:type => "text/javascript"}
        with ($('mensajes')) { scrollTop = scrollHeight;}
      =periodically_call_remote(:url => {:action => "mostrar_mensajes", :yo => current_usuario.login, :id => params[:id], :el_otro => @el_otro_usuario.login}, :frequency => 5)
      =periodically_call_remote(:url => {:action => "comprobar_actualizar_estado", :el_otro => @el_otro_usuario.login, :yo => current_usuario.login}, :frequency => 13)

#sonido_recibido
#sonido_estado  
  